<template>
	<view class="record">
		<view class="record-bg">
			<image class="record-bg-img"
				src="https://tongyongjiakao-1307163845.cos.ap-shanghai.myqcloud.com/used_img/cjd.png"></image>
			<view class="record-left" style="width: 150rpx; height: 150rpx;" @click="back">
				<image class="" style="width: 20rpx; height: 30rpx;"
					src="https://tongyongjiakao-1307163845.cos.ap-shanghai.myqcloud.com/used_img/shareleft.png"></image>
			</view>

			<view class="record-box">
				<view class="record-title">
					<image class="record-title-img"
						src="https://tongyongjiakao-1307163845.cos.ap-shanghai.myqcloud.com/used_img/titlebg.png">
					</image>
					<view class="record-title-text">
						<text v-if="kemu == 1">科目一测试成绩单</text>
						<text v-if="kemu == 4">科目四测试成绩单</text>
						<text v-if="kemu == 0">资格证测试成绩单</text>
					</view>
				</view>
				<view class="record-datetime">
					{{datetime}}
				</view>
				<view class="record-table">
					<u-table border-color="#F2F4F5" class="table">
						<u-tr class="u-tr">
							<u-td class="u-td">考试姓名</u-td>
							<u-td class="u-td">{{nickName}}</u-td>
						</u-tr>
						<u-tr class="u-tr">
							<u-td class="u-td">报考车型</u-td>
							<u-td class="u-td">{{cartype}}</u-td>
						</u-tr>
						<u-tr class="u-tr">
							<u-td class="u-td">考试科目</u-td>
							<u-td v-if="kemu == 1" class="u-td">科目一</u-td>
							<u-td v-if="kemu == 4" class="u-td">科目四</u-td>
							<u-td v-if="kemu == 0" class="u-td">资格证</u-td>
						</u-tr>
						<u-tr class="u-tr">
							<u-td class="u-td">考试日期</u-td>
							<u-td class="u-td">{{datetime}}</u-td>
						</u-tr>
						<!-- 	<u-tr class="u-tr">
							<u-td class="u-td">考试用时</u-td>
							<u-td class="u-td">{{usetime}}</u-td>
						</u-tr> -->
						<u-tr class="u-tr">
							<u-td class="u-td">考试成绩</u-td>
							<u-td class="u-td">{{natije}}分</u-td>
						</u-tr>
						<u-tr class="u-tr">
							<u-td class="u-td">考试地点</u-td>
							<u-td class="u-td">通用驾考App</u-td>
						</u-tr>
					</u-table>
				</view>

				<view class="record-sm">
					<view class="record-sm-text">
						<view class="">
							扫一扫二维码，下载通用驾考
						</view>
						<view class="" style="margin-top: 20rpx;">
							www.tongyongjiakao.com
						</view>
					</view>
					<view class="ewm">
						<image class="ewm-img"
							src="https://tongyongjiakao-1307163845.cos.ap-shanghai.myqcloud.com/used_img/qcode.png">
					</view>
				</view>
				<view v-if="hegetrue == 'true'" class="result-tgbz">
					<image class="result-tgbz-img"
						src="https://tongyongjiakao-1307163845.cos.ap-shanghai.myqcloud.com/used_img/tgbz.png"></image>
				</view>
			</view>
		</view>
		<u-popup v-model="bottomshow" mode="bottom" height="362rpx" border-radius="50" :mask="false" :mask-close-able="false">
			<view class="bottom-box">
				<view class="bottom-title">分享给TA，炫耀一下</view>
				<view class="share">
					<view class="share-box" @click="pengyoufexiang()">
						<image class="share-box-img"
							src="https://tongyongjiakao-1307163845.cos.ap-shanghai.myqcloud.com/used_img/sharewx.png">
							<view class="share-text">
								分享给好友
							</view>
							<!-- #ifdef MP-WEIXIN -->
							<u-button id="shareBtn" open-type="share" :custom-style="custom_button" :hair-line="false">
							</u-button>
							<!-- #endif -->
					</view>
					<view class="share-box" @click="jietufexiang()">
						<image class="share-box-img"
							src="https://tongyongjiakao-1307163845.cos.ap-shanghai.myqcloud.com/used_img/sharepyq.png">
							<view class="share-text">
								分享朋友圈
							</view>
					</view>
					<view class="share-box" @click="baocunpic()">
						<image class="share-box-img"
							src="https://tongyongjiakao-1307163845.cos.ap-shanghai.myqcloud.com/used_img/save.png">
							<view class="share-text">
								保存图片
							</view>
					</view>
				</view>
				<view class="kong">

				</view>
				<view class="close" style="" @click="back">
					取消
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				kemu: '1',
				cartype: '小车',
				subject: 'C1C2C3',
				natije: '1',
				hegetrue: true,
				usetime: "",
				datetime: "",
				//使用的canvas组件
				tmppic: '', //临时图片地址
				canvasSize: {},
				cancasImgs: [],
				fonts: [],
				savenum: 0,
				wang: true,
				show: false,
				//截屏分享，截屏保存
				terminals: 'app',
				bottomshow: true,
				nickName: "",
				wxyh: this.$t('ucenters.微信客户'),
				custom_button: {
					'transform': 'translate(0px,-100rpx) !important',
					'backgroundColor': 'transparent !important',
					'border': 'none !important',
				}

			};
		},
		onBackPress() {
			console.log("点击返回键：onBackPress")
			var that = this;
			var kemus = that.kemu;
			if (kemus == 0) {
				uni.redirectTo({
					url: "../index/qualification"
				})
			} else {
				uni.redirectTo({
					url: "../index/index"
				})
			}

			return false;
		},
		onUnload() {
			console.log('点击返回键：onUnload()');
			var that = this;


			var kemus = that.kemu;
			if (kemus == 0) {
				uni.redirectTo({
					url: "../index/qualification"
				})
			} else {
				uni.redirectTo({
					url: "../index/index"
				})
			}

		},
		onLoad(options) {
			var that = this;
			//检查网络状态
			var wang = that.networks;
			console.log(wang);
			console.log("options", options);
			that.kemu = options.kemu;
			that.cartype = options.cartype;
			that.subject = options.subject;
			that.natije = options.natije;
			that.hegetrue = options.hegetrue;
			that.usetime = options.yongtime;
			console.log("that.usetime", that.usetime, that.hegetrue)
			// {"kemu":"1","cartype":"小车","subject":"C1C2C3","natije":"1"}
			var date = new Date();
			let Y = date.getFullYear() + '-';
			let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			let D = date.getDate() + ' ';
			let h = date.getHours() + ':';
			let m = date.getMinutes() + ':';
			let s = date.getSeconds();
			that.datetime = Y + M + D
			console.log('datedatedatedatedate', Y + M + D)
			//#ifdef APP-PLUS
			that.terminals = 'app';
			//#endif
			// #ifdef MP-WEIXIN
			that.terminals = 'mini';

			//#endif

			let user_infos = uni.getStorageSync("user_infos")
			if (user_infos.nick_name == "" || user_infos.nick_name == "undefined") {
				that.nickName = that.wxyh
				console.log("name", that.wxyh)
			} else {
				that.nickName = user_infos.nick_name
			}
			//生成海报
			that.ccanvas();
		},
		onShareAppMessage(res) {
			return {
				title: this.$t('分享文字'),
				path: '/pages/index/index'
			}
		},
		// 自定义页面的分享到朋友圈
		onShareTimeline(res) {
			return {
				title: this.$t('分享文字'),
				path: '/pages/index/index'
			}
		},
		methods: {
			closeBox() {
				this.bottomshow = false
			},
			back() {
				console.log("点击返回键：onBackPress")
				var that = this;
				that.bottomshow = false

					var kemus = that.kemu;
					if (kemus == 0) {
						uni.redirectTo({
							url: "../index/qualification"
						})
					} else {
						uni.redirectTo({
							url: "../index/index"
						})
					}

					return false;

			},
			capture: function(scene) {
				let _this = this;
				// #ifdef MP-WEIXIN
				//uni.showShareMenu();
				// #endif
				// #ifdef APP-PLUS
				let pages = getCurrentPages();
				let page = pages[pages.length - 1];
				let bitmap = null;
				let currentWebview = page.$getAppWebview();
				bitmap = new plus.nativeObj.Bitmap('amway_img');
				// 将webview内容绘制到Bitmap对象中  
				currentWebview.draw(bitmap, function() {
					console.log('截屏绘制图片成功');
					// bitmap.save( "_doc/"+Math.random()+".jpg"
					bitmap.save("_doc/invite.jpg", {}, function(i) {
						console.log('保存图片成功：' + JSON.stringify(i));
						uni.saveImageToPhotosAlbum({
							filePath: i.target,
							success: function() {
								_this.path = i.target
								bitmap.clear(); //销毁Bitmap图片  

								_this.ppt = i.target

								console.log(_this.ppt);
							}
						});
					}, function(e) {
						console.log('保存图片失败：' + JSON.stringify(e));
					});
				}, function(e) {
					console.log('截屏绘制图片失败：' + JSON.stringify(e));
				});
				// #endif
			},
			// 分享给朋友圈
			jietufexiang() {
				this.capture();
				var that = this;
				that.networksline();
				setTimeout(() => {
					uni.share({
						provider: "weixin",
						scene: "WXSenceTimeline", //朋友圈
						type: 2,
						href: "https://www.tongyongjiakao.com",
						imageUrl: this.ppt,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				}, 500)
			},
			//分享给朋友
			pengyoufexiang() {
				this.capture();
				var that = this;
				that.networksline();
				// #ifdef MP-WEIXIN
				uni.showShareMenu();
				// #endif
				// #ifdef APP-PLUS
				setTimeout(() => {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession", //朋友
						href: "https://www.tongyongjiakao.com",
						type: 2,
						imageUrl: this.ppt,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				}, 500)
				// #endif
			},
			//保存图片
			baocunpic() {
				this.capture();
				var that = this;
				// #ifdef MP-WEIXIN
				that.show = true;
				//this.$refs.canvas.canvasToTempFilePath()
				//#endif
				//#ifdef APP-PLUS

				setTimeout(() => {
					uni.saveImageToPhotosAlbum({
						filePath: this.ppt,
						success: function() {
							console.log('save success');
							uni.showToast({
								title: '保存图片成功',
								duration: 2000
							});
						},
						fail(e) {
							console.log(e);
							uni.showToast({
								title: '保存图片失败',
								duration: 2000
							});
						}
					});
				}, 300)
				//#endif
			},
			networksline() {
				var that = this;
				var wang = that.networks;
				if (wang == false) {
					uni.showToast({
						title: '网络没链接，无法分享',
						duration: 2000
					});
					return false;
				}
			},

			//下面的代码是canvas组件实现的  暂时不用！

			ccanvas() {
				var that = this;
				console.log("77777")
				that.canvasSize = {
					width: 700,
					height: 1007
				};

				that.cancasImgs = [{
						img: '/static/1.png',
						left: 0,
						top: 0,
						width: 700,
						height: 1007
					},
					{
						img: '/static/logo.png',
						left: 552,
						top: 880,
						width: 71,
						height: 71
					}
				];
				if (that.kemu == 0) {
					that.fonts = [{
							font: '' + that.natije + '',
							site: 120,
							color: '#27c500',
							left: 430,
							top: 370,
							width: 150,
							textAlign: 'right',
							fontW: 'normal normal 120rpx SourceHanSansCN-normal'
						},
						{
							font: '分',
							site: 30,
							color: '#27c500',
							left: 430,
							top: 370,
							width: 100,
							textAlign: 'left',
							fontW: ''
						},
						{
							font: '' + that.cartype + '/' + that.subject + '/资格证',
							site: 25,
							color: '#ffffff',
							left: 350,
							top: 410,
							width: 255,
							textAlign: 'center',
							fontW: ''
						}

					];
				}
				if (that.kemu == 1) {
					that.fonts = [{
							font: '' + that.natije + '',
							site: 120,
							color: '#27c500',
							left: 430,
							top: 370,
							width: 150,
							textAlign: 'right',
							fontW: 'normal normal 120rpx SourceHanSansCN-normal'
						},
						{
							font: '分',
							site: 30,
							color: '#27c500',
							left: 430,
							top: 370,
							width: 100,
							textAlign: 'left',
							fontW: ''
						},
						{
							font: '' + that.cartype + '/' + that.subject + '/科目一',
							site: 25,
							color: '#ffffff',
							left: 350,
							top: 410,
							width: 255,
							textAlign: 'center',
							fontW: ''
						}
					];
				}
				if (that.kemu == 4) {
					that.fonts = [{
							font: '' + that.natije + '',
							site: 120,
							color: '#27c500',
							left: 430,
							top: 370,
							width: 150,
							textAlign: 'right',
							fontW: 'normal normal 120rpx SourceHanSansCN-normal'
						},
						{
							font: '分',
							site: 30,
							color: '#27c500',
							left: 430,
							top: 370,
							width: 100,
							textAlign: 'left',
							fontW: ''
						},
						{
							font: '' + that.cartype + '/' + that.subject + '/科目四',
							site: 25,
							color: '#ffffff',
							left: 350,
							top: 410,
							width: 255,
							textAlign: 'center',
							fontW: ''
						}
					];
				}
				if (that.hegetrue == true) {
					that.fonts.push({
						font: '恭喜你，成绩合格',
						site: 35,
						color: '#27c500',
						left: 350,
						top: 650,
						width: 300,
						textAlign: 'center',
						fontW: ''
					})
				} else {
					that.fonts.push({
						font: '别灰心，继续加油',
						site: 35,
						color: '#27c500',
						left: 350,
						top: 650,
						width: 300,
						textAlign: 'center',
						fontW: ''
					})
				}
				//合并canvas

			},
			clickBut() {
				var that = this;
				that.$refs.popupCanvas.open();
			},

			builderPic(halay) {
				console.log("halay", halay);
				if (halay == undefined) {
					halay = 1;
				}
				this.$refs.canvas.canvasToTempFilePath();
				var that = this;

				that.savenum = halay;
				that.show = false;
				// 生成图片


			},

			tempFilePath(res) {
				var that = this;
				console.error('生成图片触发后返回的图片路径', res);
				that.tmppic = res;
				if (that.savenum == 1) {
					that.savepics();
				}
				if (that.savenum = 2) {
					console.log("分享图片！！！！！")
				}
				that.$refs.canvas.close();
				// uni.showModal({
				// 	content: '生成图片触发后返回的图片路径:' + res
				// });
			},

			shareCanvas() {
				// 展开画布，将顶部按钮隐藏
				var that = this;
				that.$refs.canvas.draw();
				that.show = true;


				//
				//this.$refs.popupCanvas.close()
			},
			savepics() {
				var that = this;
				uni.saveImageToPhotosAlbum({
					filePath: that.tmppic,
					success: function() {
						console.log('save success');
					},
					fail(e) {
						console.log(e);
					}
				});
			},
			fanhome() {
				var that = this;
				var kemus = that.kemu;
				if (kemus == 0) {
					uni.redirectTo({
						url: "../index/qualification"
					})
				} else {
					uni.redirectTo({
						url: "../index/index"
					})
				}
			},
			homeurl() {
				var that = this;
				console.log('jinru baocun');

				// that.$u.route({
				// 	url: 'pages/index/index',
				// 	params: {}
				// })
			}
		}
	};
</script>

<style scoped lang="scss">
	.record {
		.record-bg {
			width: 750rpx;
			height: 1650rpx;
			position: relative;

			.record-bg-img {
				width: 100%;
				height: 100%;
				position: absolute;
			}

			.record-left {
				width: 14rpx;
				height: 27rpx;
				position: absolute;
				left: 30rpx;
				top: 75rpx;
			}

			.record-box {
				width: 690rpx;
				height: 923rpx;
				background: #FFFFFF;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				opacity: 1;
				position: absolute;
				left: 30rpx;
				top: 285rpx;

				.record-title {
					width: 336rpx;
					height: 77rpx;
					margin: 0 auto;
					position: relative;

					.record-title-img {
						width: 100%;
						height: 100%;
					}

					.record-title-text {
						width: 256rpx;
						height: 45rpx;
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 38rpx;
						position: absolute;
						top: 20rpx;
						left: 40rpx;
					}
				}

				.record-datetime {
					width: 690rpx;
					height: 39rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #2B2B2B;
					line-height: 33rpx;
					margin: 30rpx auto;
					text-align: center;
				}

				.record-table {
					width: 566rpx;
					margin: 0 auto;

					.table {
						font-size: 30rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 35rpx;

						.u-td {
							width: 150rpx;
							height: 80rpx;
						}
					}
				}

				.record-sm {
					width: 690rpx;
					padding: 30rpx 60rpx;
					margin: 0 auto;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.record-sm-text {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #2B2B2B;
						line-height: 28rpx;
					}

					.ewm {
						width: 126rpx;
						height: 126rpx;

						.ewm-img {
							width: 100%;
							height: 100%;
						}
					}
				}


			}

			.result-tgbz {
				width: 245rpx;
				height: 355rpx;
				position: absolute;
				top: 390rpx;
				right: 0rpx;

				.result-tgbz-img {
					width: 100%;
					height: 100%;
				}

			}
		}

		.bottom-title {
			width: 100%;
			margin: 30rpx auto;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 33rpx;
			text-align: center;

		}

		.share {
			width: 100%;
			padding: 20rpx 60rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			.share-box {
				display: flex;
				flex-direction: column;
				align-items: center;

				.share-box-img {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 10rpx;
				}

				.share-text {
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #2B2B2B;
					line-height: 30rpx;
				}
			}
		}

		.kong {
			width: 750rpx;
			height: 10rpx;
			background: #F2F2F2;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			opacity: 1;
		}

		.close {
			width: 750rpx;
			height: 130rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #2B2B2B;
			line-height: 100rpx;
		}
	}
</style>